
function saveData() {
    if (window.localStorage) {
        localStorage.setItem("ToDoData", JSON.stringify(ToDoData))
    } else {
        console.error('Save data error!')
    }
}
let isClear = false;
window.onbeforeunload = function () {
    saveData();
}
let initData = {
    items: [],
    done: [],
    trash: [],
}
let ToDoData = JSON.parse(localStorage.getItem("ToDoData"));
if (!ToDoData) {
    ToDoData = initData;
    saveData();
}
let uid = 0;
function create_key() {
    return uid++;
}
(function () {
    //更新key
    const li = ToDoData.items.length;
    const ld = ToDoData.done.length;
    const lt = ToDoData.trash.length;
    const len = Math.max(li, ld, lt);
    for (let i = 0; i < len; i++) {
        if (i < li) ToDoData.items[i]['key'] = create_key();
        if (i < ld) ToDoData.done[i]['key'] = create_key();
        if (i < lt) ToDoData.trash[i]['key'] = create_key();
    }
})()
const app = Vue.createApp({
    data() {
        return {
            items: ToDoData.items,
            done: ToDoData.done,
            trash: ToDoData.trash,
            content: '',
            trash_show: false,
        }
    },
    computed: {
        todo_task () {
            let len = this.items.length;
            return len ? '今日任务 (' + len + ')' : '全部完成';
        }
    },
    methods: {
        changeItem(index, value, done) {
            if (!done) {
                this.items[index].content = value;
            }
        },
        add_item() {
            if (this.content.trim()) {
                this.items.unshift({
                    key: create_key(),
                    content: this.content,
                    done: false,
                    del: false
                });
                this.content = '';
                this.$refs.maininputfoucs.focus();
                if (isClear) {
                    saveData();
                    window.onbeforeunload = function () {
                        saveData();
                    }
                }
            }
        },
        deleteItem(index, checked) {
            let rst;
            if (checked) {
                rst = this.done.splice(index, 1)[0]
            } else {
                rst = this.items.splice(index, 1)[0]
            }
            rst.del = true;
            this.trash.unshift(rst);
            if (this.trash.length > 20) {
                this.trash.pop();
            }
        },
        resetItem(index, done) {
            if (done) {
                let rst = this.done.splice(index, 1)[0];
                rst.done = false;
                this.items.unshift(rst);
            } else {
                let rst = this.items.splice(index, 1)[0];
                rst.done = true;
                this.done.unshift(rst);
            }
        },
        trash_show_switch() {
            this.trash_show = !this.trash_show;
        },
        goBack(index) {
            let rst = this.trash.splice(index, 1)[0];
            rst.done = false;
            rst.del = false;
            this.items.unshift(rst);
        },
        finalDelete(index){
            this.trash.splice(index, 1);
        },
        clearDatabase() {
            if (confirm('清空数据？')) {
                isClear = true;
                this.items = ToDoData.items = [];
                this.done = ToDoData.done = [];
                this.trash = ToDoData.trash = [];
                localStorage.clear();
                window.onbeforeunload = null;
            }
        }
    },
})
app.component('todo-item', {
    props: ['content', 'index', 'checked', 'del'],
    data() {
        return {
            style: {
                backgroundColor: '',
            },
            itemStyle: {
                textDecoration: this.checked ? 'line-through' : 'none',
                color: (this.checked || this.del) ? '#999' : '#333'
            },
            edit: false,
            edit_title: (this.checked || this.del) ? '' : '编辑'
        }
    },
    methods: {
        delete_item () {
            this.$emit('deleteItem', this.index, this.checked)
        },
        change () {
            if (!this.checked) {
                this.itemStyle.textDecoration = 'line-through';
                setTimeout(() => {
                    this.$emit('resetItem', this.index, this.checked)
                }, 300);
            } else {
                this.$emit('resetItem', this.index, this.checked);
            }
        },
        handle_edit () {
            if (!this.checked && !this.del) {
                this.edit = true;
                this.$nextTick(function () {
                    this.$refs.editfocus.focus();
                })
            }
        },
        handle_edit_done () {
            this.$emit('changeItem', this.index, this.$refs.editfocus.innerText, this.checked)
            this.edit = false;
        },
        goback () {
            this.$emit('goBack', this.index);
        },
        finaldelete () {
            this.$emit('finalDelete', this.index);
        }
    },
    template: `
    <div class='item' :style='style'>
        <div class="checkbox" >
            <input @change='change' type="checkbox" :checked="checked" :disabled='del' />
        </div>
        <div class='item-content' @click='handle_edit' :title='edit_title'>
            <span :style='itemStyle' :contenteditable='edit' ref='editfocus' @blur='handle_edit_done' @keydown.enter='handle_edit_done' >{{ content }}</span>
        </div>
        <div class='item-edit'>
            <div v-if='!del'  title='删除' class='icon-del' @click='delete_item'>×</div>
            <div v-else class='go-back' ><button @click='goback'>还原</button><button style='margin-left: 5px' @click='finaldelete'>删除</button></div>
        </div>
    </div>
    `
})
app.mount('#todo')
